import {Form, Input, InputNumber, message, Modal} from 'antd';
import {forwardRef, useImperativeHandle, useState} from 'react';
import {addProjectList} from '@/api/index.js';

const NewProject = (props, ref) => {
    const {onSuccess = () => void 0} = props;
    const [showCreateProject, setShowCreateProject] = useState(false);
    const [form] = Form.useForm();
    useImperativeHandle(ref, () => {
        return {
            open: () => {
                setShowCreateProject(true);
            },
            close: () => {
                setShowCreateProject(false);
            }
        };
    });
    const submit = () => {
        // form.validateFields().then((values) => {
        //     addProjectList(values)
        //         .then((r) => {
        //             form.resetFields();
        //             onSuccess();
        //             setShowCreateProject(false);
        //         })
        //         .catch((err) => {
        //             message.error(err);
        //         });
        // });
        //
    };
    return (
        <Modal
            open={showCreateProject}
            title="新增项目"
            destroyOnClose={true}
            closable={true}
            maskClosable={false}
            onOk={submit}
            onCancel={() => {
                setShowCreateProject(false);
            }}>
            <Form form={form} name="project" labelCol={{span: 4}} wrapperCol={{span: 20}}>
                <Form.Item label="项目名称" name="name" required rules={[{required: true}]}>
                    <Input placeholder="请输入项目名称" />
                </Form.Item>
                <Form.Item label="项目描述" name="desc" rules={[{required: false}]}>
                    <Input placeholder="请输入项目描述" />
                </Form.Item>
                <Form.Item label="宽" name="width" required rules={[{required: true}]}>
                    <InputNumber
                        placeholder="请输入页面宽度"
                        controls={false}
                        precision={0}
                        min={1280}
                        max={3840}
                        style={{width: '100%'}}
                        addonAfter={<span>PX</span>}
                    />
                </Form.Item>
                <Form.Item label="高" name="height" required rules={[{required: true}]}>
                    <InputNumber
                        placeholder="请输入页面高度"
                        controls={false}
                        precision={0}
                        min={600}
                        max={3840}
                        addonAfter={<span>PX</span>}
                        style={{width: '100%'}}
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};
export default forwardRef(NewProject);
